/*
 * @Description: 
 * @Author: 韩双双
 * @Date: 2021-04-20 14:52:15
 * @LastEditTime: 2021-05-05 14:24:55
 * @LastEditors: 邢
 */
import react, { useState, FC, useEffect, useRef } from 'react'
import styles from './index.less';
import { observer } from 'mobx-react-lite';
import { Layout } from 'antd';
import { IRouteComponentProps, NavLink, useHistory } from 'umi';
import { Menu } from '@/utils/Memu';
import BackTop from '@/component/Articel/antd';
import Swich from '@/component/Articel/button/swich';
import useStore from '@/context/useStore';
import { values } from 'mobx';

const { Header, Footer, Sider, Content } = Layout;


const style = {
  background: `url("") 100% 50% no-repeat`,
  width: 24,
  height: 24,
  display: 'inline-block',
  margin: '0 16px',
  verticalAlign: 'middle'
}
let IndexPage: FC = (props: IRouteComponentProps) => {
  let { article } = useStore();
  let [show, setShow] = useState(false)
  let history = useHistory();
  let solog = useRef(null);
  const [AlertFlag,setalertFlag] = useState<boolean>(false)

  useEffect(() => {
    article.getArticletag()
  }, [])


  let Tag = (ID: string) => {
    setShow(false)
    history.push('/index/tag/git', { ID: ID })
  }

  const btn = () => {
    article.getsearch({ keyword: (solog.current! as HTMLInputElement).value })
  }
  return (
    <div className={styles.ht}>
      <Layout>
        <Header className={styles.Index}>
          <div className={styles.img}>
            <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png" alt="" />
          </div>
          {/* 三道杠 */}
          <div className={`${styles.three} ${AlertFlag?styles.active:''}`} onClick={()=>setalertFlag(prev=>!prev)}>
            <div className={styles.items}></div>
            <div className={styles.items}></div>
            <div className={styles.items}></div>
          </div>
          <div className = {`${styles.Alert} ${AlertFlag?styles.active:''}`} onClick={()=>setalertFlag(prev=>!prev)} >
              {/* 导航部分 */}
            <div>
              {
                Menu.map(item => {
                  return <NavLink to={item.to} key={item.id}>
                    {item.name}
                  </NavLink>
                })
              }
            </div>
              {/* 夜间模式 */}
            <div>
              <Swich></Swich>
              <span style={style} onClick={() => {setShow(true)}} className={styles.stylel}></span>
            </div>
          </div>
          {/* 导航部分 */}
          <div className={styles.nav}>
            {
              Menu.map(item => {
                return <NavLink to={item.to} key={item.id}>
                  {item.name}
                </NavLink>
              })
            }
          </div>
            {/* 夜间模式 */}
          <div className={styles.the}>
            <Swich></Swich>
            <span style={style} onClick={() => setShow(true)} className={styles.stylel}></span>
          </div>

          {/* 搜索框 */}
          <div className={styles.sear}>

            {
              show ? <div className={styles.ShoWS}>
                <div >
                  <span onClick={() => setShow(false)}>X</span>
                  <form action="" className={styles.table}>
                    <input type="text" placeholder='请输入' ref={solog} />
                    <span onClick={() => btn()}></span>
                  </form>
                  <div className={styles.arti}>
                    {
                      article.articleTag.map(item => {
                        return <span key={item.id} onClick={() => Tag(item.value)}>{item.label + `[${item.articleCount}]`}</span>
                      })
                    }
                  </div>
                  <div>
                    {
                      article.search && article.search.map(item=>{
                        return <ul key={item.id}>
                          <li>{item.title}</li>
                        </ul>
                      })
                    }
                  </div>
                </div>
              </div> : ''
            }
          </div>
        </Header>

        <Content className={show?styles.coms:styles.com}>{props.children}</Content>

        <Footer className={styles.footer}>Footer</Footer>
        <div className={styles.flot}>
          <BackTop></BackTop>
        </div>
      </Layout>
    </div>
  );
}
export default observer(IndexPage)